<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>prevent修饰符</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <a href="https://www.baidu.com" v-on:click="goto">百度一下  未添加prevent修饰符</a><br>
        <a href="https://www.baidu.com" v-on:click.prevent="goto" >百度一下,添加了prevent修饰符</a>
        <blockquote>
            a href="www.baidu.com" v-on.v-pre:click="goto"<br>
            a href="www.baidu.com" v-on.prevent:click="goto"><br>
            两种写法都可以<br>
            prevent主要用于阻止默认的事件发生，而改变事件
        </blockquote>

        <h2>在prevent修饰符的情况下，可以阻止表单刷新</h2>
        <form v-on:submit.prevent="tijiao">
            <input type="text" name="username">
            <input type="submit" value="提交">
        </form>        
        <h2>没有指定方法，只有修饰符</h2>
        <form v-on:submit.prevent>
            <input type="text" name="username">
            <input type="submit" value="提交">
        </form>
    </div>

   

</body>
<script>
    var vm=new Vue({
        el:"#app",
        data:{

        },
        methods: {
            goto:function(){
                alert('触发了时间goto')
            },
            tijiao:function(){
                console.log('已经阻止了重新加载界面')
            }
        },
    })
</script>
</html>